<template>
  <div class="container">
    <div class="list-container">
      <button @click="refreshList" class="button">刷新refresh</button>
      <table class="user-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>用户名username</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="user in userList" :key="user.id">
            <td>{{ user.id }}</td>
            <td>{{ user.username }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="form-container">
      <span>userId: </span>
      <input v-model="userId" placeholder="用户id-input userId" class="input" />
       <span>username: </span>
      <input v-model="username" placeholder="用户名-input username" class="input" />
      <span>查询结果(query result): </span>
      <input :disabled="true" v-model="userQuery"  class="input" />
      <div class="button-group">
        <button @click="addData" class="button">新增-add</button>
        <button @click="queryData" class="button">查询-query</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const username = ref('')
const userId = ref('2')
const userQuery = ref('')
const password = ref('')
const userList = ref([])
const { $trpc } = useNuxtApp()
const handleClick = async () => {

}
const addData = async () => {
  if(!username.value){
    alert('place input username')
    return
  }
  const id = await $trpc.sysRouter.addUser.mutate(username.value)
  alert(' add ok ! id:' + id)
  refreshList()
  // 方法实现由用户自行编写
}
const queryData = async () => {
  if(!userId.value){
    alert('place input userId')
    return
  }
  const res = await $trpc.sysRouter.queryById.query(userId.value)
  userQuery.value = JSON.stringify(res)
}
const refreshList = async () => {
  userList.value = await $trpc.sysRouter.getAllUsers.query()
}
onMounted(() => {
  refreshList()
})
</script>

<style scoped>
.container {
  max-width: 1000px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 20px;
}

.list-container {
  flex: 1;
}

.form-container {
  flex: 1;
}

.user-table {
  width: 100%;
  border-collapse: collapse;
}

.user-table th,
.user-table td {
  padding: 8px;
  border: 1px solid #ddd;
  text-align: left;
}

.user-table th {
  background-color: #f2f2f2;
}

.input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.button-group {
  display: flex;
  justify-content: space-between;
}

.button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  flex: 0 0 48%;
}

.button:hover {
  opacity: 0.9;
}
</style>